<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Breadcrumb</h1>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>

                    </header>

                    <div class="card">
                        <div class="card-block">
                            <p>Indicate the current page’s location within a navigational hierarchy. Separators are automatically added in CSS through <code>::before</code> and <code>content</code></p>

                            <br/>

                            <ol class="breadcrumb">
                                <li class="breadcrumb-item active">Home</li>
                            </ol>

                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active">Library</li>
                            </ol>

                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item"><a href="#">Library</a></li>
                                <li class="breadcrumb-item active">Data</li>
                            </ol>

                            <br/>
                            <br/>

                            <p>Similar to the navigation components, breadcrumbs work fine with or without the usage of list markup.</p>

                            <nav class="breadcrumb">
                                <a class="breadcrumb-item" href="#">Home</a>
                                <a class="breadcrumb-item" href="#">Library</a>
                                <a class="breadcrumb-item" href="#">Data</a>
                                <span class="breadcrumb-item active">Bootstrap</span>
                            </nav>
                        </div>
                    </div>
                </div>

                
            </div></template>